<template>
  <el-select
    v-model="selectId" :placeholder="placeholder" filterable multiple reserve-keyword
    default-first-option value-key="id"
  >
    <el-option v-for="item in options" :key="item.id" :label="item.id+','+item.name" :value="item"/>
  </el-select>
</template>
<script>
import {list} from "@/api/system/role";

export default {
  name: "RoleMultipleSelect",

  props: {
    value: {type: Array, default: null},
    placeholder: {type: String, default: ''}
  },

  data() {
    return {
      selectId: null,
      options: [],
    }
  },

  watch: {
    value(val) {
      this.selectId = val
    },
    selectId(val) {
      this.$emit('input', val)
    }
  },

  mounted() {
    this.list()
  },

  methods: {
    list() {
      list({}).then(res => {
        this.options = res.data
      })
    },
  }
}
</script>

<style scoped>

</style>
